.frame {
    position: absolute;
    width: 400px;
    height: 400px;
    inset: 0;
    margin: auto;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
    overflow: hidden;
    background: #de4738;
    color: #fff;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      
  }

  .pixel{
    float: left; 


    input{
        display: none;
    }

    label{
        box-sizing: border-box;
        display: block;
        width: 20px;
        height: 20px;
        border: 1px solid #e24e3f;
        cursor: pointer;

        &:hover{
            background-color: #e24e3f;
            border-color: #fff;
        }
    }

    input:checked ~ label{
        background-color: #fff;
        border-color: #fff;
    }

  }